<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.bg {
				background-image: url(../img/welcome-1.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 100%;
				position: absolute;
				height: 100%;
				width: 100%;
			}
			
			.corner-container {
				background: rgba(255, 255, 255, 0.3);
				height: 50px;
				width: 70%;
				margin: 0px auto;
				border-radius: 50px;
				padding: 0px;
				box-shadow: 2px 2px 5px #888888, -2px -2px 5px #888888;
			}
			
			.white-color {
				color: white;
			}
			
			.margin-t-20 {
				margin-top: 20px;
			}
			
			.margin-t-40 {
				margin-top: 20px;
			}
			
			.corner-container .left {
				width: auto;
				padding: 0px 10px;
				overflow: hidden;
			}
			
			.text-size {
				font-size: 1.6rem;
			}
			
			.corner-container .right {
				width: auto;
				overflow: hidden;
				padding: 0px 5px;
			}
			
			input {
				height: 100%;
				width: 100%;
				background: none;
				border: none;
				border-color: rgba(0, 0, 0, 0);
				color: white;
				box-shadow: none;
				padding-left: 10px;
				outline: none;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
				opacity: 1;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
				opacity: 1;
			}
			
			input:-ms-input-placeholder {
				color: white;
				opacity: 1;
			}
			
			input::-webkit-input-placeholder {
				color: white;
				opacity: 1;
			}
			
			.box-shadow-l {
				box-shadow: inset 1px -0px 3px #888888;
				border: none;
				border-bottom-right-radius: 50px;
				border-top-right-radius: 50px;
			}
			
			.box-shadow-l-r {
				box-shadow: inset -1px -0px 3px #888888, inset 1px -0px 3px #888888;
				;
				border: none;
			}
			
			.corner-r {
				border-bottom-right-radius: 50px;
				border-top-right-radius: 50px;
			}
			
			.corner-l {
				border-bottom-left-radius: 50px;
				border-top-left-radius: 50px;
			}
			
			.login-btn {
				background: rgba(255, 255, 255, 0.8);
				font-size: 2rem;
				color: #555555;
			}
			
			.login-btn:active {
				background: rgba(255, 255, 255, 0.3);
			}
		</style>
	</head>

	<body>
		<div class="bg flex v-center">
			<div class="fill-w">
				<div class="corner-container flex v-center white-color">

					<div class="left text-size">
						图片
					</div>
					<div class="flex-1 fill-h box-shadow-l corner-r">
						<input type="tel" placeholder="手机号" maxlength="11" class="text-size" />
					</div>

				</div>

				<div class="fill-w  margin-t-20">
					<div class="corner-container flex v-center white-color">

						<div class="left text-size">
							图片
						</div>
						<div class="flex-1 fill-h box-shadow-l-r">
							<input type="number" placeholder="验证码" class="text-size" />
						</div>
						<div class="left text-size">
							图片
						</div>
					</div>

				</div>
				<div onclick="bind()" class="margin-t-40 login-btn corner-container flex v-center h-center white-color">

					绑定

				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/local-keys.js" ></script>
		
		<script>
			mui.plusReady(function() {

			});

			function bind() {
				setlocalItem(getislLoginKey(), "true");
				var webview = mui.openWindow({
					url: '../index.html',
					
				});
				
			}
		</script>
	</body>

</html>